import React, { useState, useEffect } from "react";
import { useSearchParams, useNavigate } from "umi";
import { fetChDetail } from "@/api/home";
import NavBarDiv from '@/components/NavBar'
import { Swiper, Button, Popup, Stepper } from "antd-mobile";
import './index.scss'
import Icon from "@/components/Icon";
import { joinCrat } from '@/api/home'
import { Toast } from 'antd-mobile'
export default function index() {
  const navigate = useNavigate()
  const itemId = useSearchParams()[0].get('itemId');
  // 获取商品的详细信息
  const [itemDetail, setDetail] = useState<any>({
    basicInfo: {},
    pics2: [],
    content: ''
  })
  const getDetail = () => {
    fetChDetail({ id: itemId }).then((res => {
      if (res.data.code === 0) {
        console.log(res);
        const { basicInfo, pics2, content } = res.data.data
        console.log(pics2);
        setId(basicInfo.id)

        setDetail({
          basicInfo,
          pics2,
          content
        })
      }
    }))
  }
  // 控制商品规格弹出层
  const [visible1, setVisible1] = useState(false)
  useEffect(() => {
    getDetail()
  }, [])
  // 加入购物车
  const itemJoinCrat = () => {
    joinCrat({
      goodsId: joinCratItemId,
      number: itemNum
    }).then(res => {
      if (res.data.code === 0) {
        Toast.show({
          content: '加入购物车成功',
          afterClose() {
            setVisible1(false)
          }

        })
      }
    })
  }
  // 商品的数量
  const [itemNum, setNum] = useState(1)
  // 商品的id
  const [joinCratItemId, setId] = useState(String)
  return (
    <>
      <NavBarDiv title={itemDetail.basicInfo.name} />
      <div className="NavMain">
        <div className="NavSwiper">
          <Swiper autoplay loop>
            {
              itemDetail.pics2.map((bar: any) => (
                <Swiper.Item key={bar}>
                  <img src={bar} />
                </Swiper.Item>
              ))
            }
          </Swiper>

        </div>
        <div className="NavContent">
          <h5>{itemDetail.basicInfo.name}</h5>
          <div>
            <span className="price1">{`￥${itemDetail.basicInfo.originalPrice}.00`}</span>
            <span className="price2">{`￥${itemDetail.basicInfo.minPrice}.00`}</span>
          </div>
        </div>
        <div className="itemInfo">
          <div dangerouslySetInnerHTML={{ __html: itemDetail.content }}>
          </div>
        </div>

      </div>
      <div className="NavBottom">
        <div className="bottomLeft">
          <div onClick={() => {
            navigate('/home')
          }}>
            <Icon name="icon-cart" size={25}></Icon>
            <p>首页</p>
          </div>
          <div onClick={() => {
            navigate('/cart')
          }}>
            <Icon name="icon-home" size={25}></Icon>
            <p>购物车</p>
          </div>

        </div>
        <div className="bottomRight">
          <Button className="button1" onClick={() => {
            setVisible1(true)
          }}>加入购物车</Button>
          <Button className="button2">立即购买</Button>
        </div>
      </div>
      {/* 商品规格 */}
      <Popup
        visible={visible1}
        showCloseButton
        onClose={() => {
          setVisible1(false)
        }}
        bodyStyle={{ height: '30vh' }}
      >
        <div className="cartItem">
          <div className="itemImg">
            <img src={itemDetail.pics2[0]} alt="" />
          </div>
          <div className="itemCot">
            <p className="itemp">{itemDetail.basicInfo.name}</p>
            <p className="itemPrice">{`￥${itemDetail.basicInfo.originalPrice}.00`}</p>
            <Stepper
              min={1}
              defaultValue={1}
              onChange={value => {
                console.log(value)
                setNum(value)
              }}
            />
          </div>
        </div>
        <Button onClick={() => {
          itemJoinCrat()
        }} className="itemButton" color="primary">加入购物车</Button>
      </Popup>

      {/* <div dangerouslySetInnerHTML={{ __html: itemDetail.content }}></div> */}
    </>
  );
}
